
<script  setup  lang="ts">
import {ref,reactive} from "vue";
import type { FormInstance, FormRules } from 'element-plus'
import { registerApi} from './api/UserApi.ts'
import {useRouter} from "vue-router";
import { ElMessage } from 'element-plus'
const ruleFormRef = ref<FormInstance>()

import {digElMessage} from "../common/Message.ts";

let router=useRouter();

interface  userDateType{
  userName: string,
  userPhone: string,
  userEmail: string,
  password1:string,
  password2:string
}
let formData=ref(    {
  userName: '',
  userPhone: '',
  userEmail: '',
  password1:'',
  password2:''
},)


//@ts-ignore
const validatePass = (rule: any, value: any, callback: any) => {

  if (formData.value.password1!= formData.value.password2) {
    callback(new Error('两次输入的密码不一致'))
  }

  else{
    callback()
  }

}
const rules= reactive<FormRules<userDateType>>({
  userName:[{ required: true, message: '请输入账号', trigger: 'blur' }],
  userPhone:[{ required: true, message: '请输入手机号', trigger: 'blur' },
    {
      pattern: /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/,
      message: '请输入正确的手机号',
      trigger: 'blur'
    }],
  userEmail:[{ required: true, message: '请输入邮箱', trigger: 'blur' },{
    type: 'email',
    message: '请输入正确的邮箱地址',
    trigger: 'blur'}],
  password1:[{ required: true, message: '请输入密码', trigger: 'blur' }],
  password2:[{ required: true, message: '请输入密码', trigger: 'blur' },{ validator: validatePass, trigger: 'blur' }]
})


const userRegister= async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  //@ts-ignore
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let registerData={
        userCount:"",
        userPhone:"",
        userEmail:"",
        userPassword:"",
      }
      registerData.userCount = formData.value.userName;
      registerData.userEmail = formData.value.userEmail;
      registerData.userPhone = formData.value.userPhone;
      registerData.userPassword = formData.value.password2;
      await registerApi(registerData).then(res=>{

        if(res.code=='00000'){

          digElMessage('注册成功即将跳转登录页面','success',900)


          setTimeout(()=>{ router.push("/user_login")},1000)
        }


      })
    } else {
      console.log('error submit!')
      return false
    }

  })
}



</script>

<template>
  <div class="register_head">
    <div class="register_head_logo">
      <span  class="register_head_logo_qs">QST</span>
      <span>云端网盘</span>
    </div>
    <div class="login_button" >
      <el-text size="large" style="margin-right: 15px">已有账号:</el-text>
      <el-link type="primary" style="font-size: 18px" @click="router.push('/user_login')">登录</el-link>
    </div>
  </div>

  <div class="User_Register" >


    <div class="from_register" style="margin: 0 auto">
      <div class="from_register_head" >
        <el-row>账号注册</el-row>
      </div>

      <el-form
          style="margin: 50px"
          ref="ruleFormRef"
          class="from_register_data"
          :model="formData"
          :rules="rules"
          label-width="auto"
      >
        <el-form-item style="margin-left: 20px" prop="userName"  label="账户" >
          <el-input  style="width: 240px" v-model="formData.userName" placeholder="请输入账户"  prefix="账户"></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 20px" prop="userPhone" label="手机号">
          <el-input  style="width: 240px" v-model="formData.userPhone" placeholder="用于登录或找回密码"></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 20px" prop="userEmail" label="邮箱">
          <el-input  style="width: 240px" v-model="formData.userEmail" placeholder="可用于登录或找回密码"></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 20px" prop="password1" label="密码">
          <el-input  style="width: 240px" type="password" v-model="formData.password1" placeholder="请输入密码" show-password></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 20px" prop="password2" label="确认密码">
          <el-input  style="width: 240px" type="password" v-model="formData.password2" placeholder="请再次输入密码" show-password></el-input>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" style="width:  140px;margin: 0 auto"  @click="userRegister(ruleFormRef)">注册</el-button>
        </el-form-item>

      </el-form>

    </div>



  </div>



</template>




<style scoped lang="less">

.User_Register{
  height: 85vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../assets/backgroud.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  font-size: 20px;

}
.register_head {

  font-family: 华文楷体;
  font-size: 20px;
  background-color: aliceblue;
  height: 80px;
  width: 100vw;
  display: flex;

  justify-content: space-around;

  //div {
  //  margin-right: 50px;
  //}

  .register_head_logo {

    span {
      background-image: -webkit-linear-gradient(bottom, #1B1464, #5758BB, #7d5fff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-weight: bold;
      font-size: 50px;
      font-family: 华文楷体;
      margin-left: 5px;

    }

  }
  .login_button{
    display: flex;
    justify-content: space-around;
    align-items: center;


  }
}

.from_register{
  border: 2px solid rgba(0, 217, 255, 0);    //div设置边框，边框粗度为2px，实线，
  width: 450px;
  position: absolute;
  left: 20%;
  margin: -50px 0 0 -50px;

  .from_register_head{

    margin-top: 5%;
    margin-left: 35%;
    font-weight: bold;
    font-size: 30px;
    font-family: 华文楷体;
  }
}


</style>